<template>
	<view @click="shangchuan" class="sctp_box" :style="{'border': imgData != null && imgData != '' ? '0px' : '1px solid #ccc'}">
		<image v-if="imgData != null && imgData != ''" :src="imgData[0].path"></image>
		<span style="line-height: 200rpx;" v-else>请上传图片</span>
		<view v-if="imgData != null && imgData != ''" class="del_img" @click.stop="delImg">删除</view>
	</view>
</template>

<script>
export default {
	name: 'uFilePicker',
	data() {
		return {
			imgData: null,
		};
	},
	methods: {
		shangchuan() {
			let _this = this;
			wx.chooseMessageFile({
				count: 10,
				type: 'image',
				success(res) {
					// tempFilePath可以作为img标签的src属性显示图片
					// const tempFilePaths = res.tempFiles;
					_this.imgData = res.tempFiles;
				}
			});
		},
		delImg() {
			this.imgData = null;
		}
	}
};
</script>

<style lang="scss">
.sctp_box {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	text-align: center;
	position: relative;
	margin: 10px 0;
	
	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	
	.del_img {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		color: red;
	}
}
</style>
